<template>
  <!-- 递归树形菜单 -->
  <el-menu
    :router="isRouterMenu"
    :default-active="activeMenu"
    class="tree-menu"
    :collapse="isCollapse"
    :unique-opened="true"
  >
    <!-- 使用递归组件 -->
    <my-sub-menu
      v-for="item in menu"
      :key="item.path"
      :item="item"
    ></my-sub-menu>
  </el-menu>
</template>

<script setup name="MenuTree">
import { reactive, toRefs, watch } from "vue";
import { useRoute } from "vue-router";
import MySubMenu from "./sub-menu.vue";

const route = useRoute();

defineProps({
  menu: {
    type: Array,
    default: () => [],
    required: true,
  },
  isCollapse: {
    type: Boolean,
    default: false,
  },
  isRouterMenu: {
    type: Boolean,
    default: true,
  },
});

const data = reactive({
  isCollapse: false,
  activeMenu: "",
});

watch(
  () => route,
  (route) => {
    data.activeMenu = route.path;
  },
  {
    immediate: true,
  }
);

const { activeMenu } = toRefs(data);
</script>

<style lang="scss">
.tree-menu.el-menu {
  border-right: none;
  min-height: 400px;
  height: calc(100% - 120px);
  overflow: auto;
  // margin-top: 50px;
  // &:not(.el-menu--collapse) {
  //   width: 200px; /* px-to-viewport-ignore */
  // }
  background-color: transparent;
  .el-menu {
    background-color: transparent;
    .el-menu-item {
      color: #1890ff;
    }
  }
}
</style>
